<!--
 * @Author: your name
 * @Date: 2022-01-07 10:13:55
 * @LastEditTime: 2023-08-07 10:30:57
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\statistical-report\exception-report\index.vue
-->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <Search
        :day="true"
        :status="true"
        :search-list="reset"
        @search-list="searchList"
      >
        <template v-slot:left>
          <div v-if="status" class="label-input mr-20">
            <div class="label">选择承租户：</div>
            <div class="input">
              <el-select v-model="reset.lesseeNo" filterable clearable>
                <el-option value="" label="所有承租户" />
                <el-option
                  v-for="item in lesseeList"
                  :key="item.lesseeNo"
                  :label="item.lesseeName"
                  :value="item.lesseeNo"
                />
              </el-select>
            </div>
          </div>
          <div class="label-input mr-20">
            <div class="label">批次名称：</div>
            <div class="input">
              <el-select v-model="reset.batchNo" style="width: 220px" filterable clearable>
                <el-option value="" label="所有批次" />
                <el-option
                  v-for="item in batchList"
                  :key="item.batchNo"
                  :label="item.batchName"
                  :value="item.batchNo"
                />
              </el-select>
            </div>
          </div>
        </template>
        <template v-slot:right>
          <div class="search ml-20">
            <img src="~@/assets/action-bar-icon/search.png" @click="search" />
          </div>
          <div class="search ml-20">
            <img src="~@/assets/statistical-report/reset.png" @click="resets" />
          </div>
          <div class="search ml-20">
            <img src="~@/assets/statistical-report/export.png" @click="open" />
          </div>
        </template>
      </Search>
      <Time />
    </template>
    <template v-slot:content>
      <!-- 基地权限 -->
      <div v-if="status" class="main-boxone">
        <!-- 农资投入金额 -->
        <Main class="lesseeOutput">
          <template v-slot:top-name> 物联告警明细 </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="alarmDetailsData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column
                  label="批次名称"
                  prop="batchName"
                  min-width="140"
                />
                <el-table-column label="告警名称" prop="baseAlarmName" />
                <el-table-column label="告警数据项" prop="dataItemName" />
                <el-table-column label="告警数据类型" prop="dataTypeName" />
                <el-table-column label="告警类别" prop="alarmTypeName" />
                <el-table-column label="告警发生时间" prop="generateTime" />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
            <div class="alarm-type">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="abnormalList.statisticsReportVOList"
                stripe
                border
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column
                  label="告警类型名称"
                  prop="alarmTypeName"
                  min-width="140"
                />
                <el-table-column label="次数" prop="number">
                  <template slot-scope="scope">
                    {{ scope.row.number }}
                  </template>
                </el-table-column>
              </el-table>
              <!-- <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              /> -->
            </div>
            <div class="bottom">
              <div
                v-for="item in abatchList"
                :key="item.abatchList"
                class="batch-statistics"
              >
                <h4>{{ item.lessee }}</h4>
                <tr>
                  <div>
                    <p>批次名称</p>
                    <p>{{ item.batchName }}</p>
                  </div>
                  <div>
                    <p>异常告警次数</p>
                    <p>{{ item.statisticsReportVO.total }}</p>
                  </div>
                  <div>
                    <p>执行时间</p>
                    <p>{{ item.assetDate }} ~ {{ item.completionDate }}</p>
                  </div>
                </tr>
                <div
                  v-for="(items, indexs) in item.statisticsReportVO
                    .statisticsReportVOList"
                  :key="indexs"
                  class="give"
                >
                  <template v-for="(alarm, index) in items">
                    <div :key="index">
                      <p>
                        {{ alarm.alarmTypeName }}
                      </p>
                      <i></i>
                      <p v-if="alarm.number">
                        <span>{{ alarm.number }}</span> 次
                      </p>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </Main>
        <!-- <Main class="outputdetails">
          <template v-slot:top-name> 虫害告警明细 </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="pestdetailsData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column
                  label="虫害名称"
                  prop="insectName"
                  min-width="140"
                />
                <el-table-column label="虫害数量" prop="insectNum" />
                <el-table-column label="发生时间" prop="collectionTime" />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPages"
                :total-size="totalSizes"
                @changePageSize="changePageSizes"
                @changeCurrentPage="changeCurrentPages"
              />
            </div>
            <div class="agricultural-statistics">
              <el-carousel arrow="never" :autoplay="false">
                <el-carousel-item v-for="(item, index) in conList" :key="index">
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.insectName }}
                      </div>
                      <div class="shadows-main">
                        <h4>虫害总数量</h4>
                      </div>
                      <div class="shadows-bottom">
                        <p>
                          <span>{{ item1.insectNum }}</span> 只
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main> -->
      </div>
      <!-- 承租户权限 -->
      <div v-if="!status" class="information">
        <div class="information-item">
          <i></i>
          <p>批次名称</p>
          <p>{{ batchData.batchName }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养设施</p>
          <p class="facility">
            <span
              v-for="item in batchData.batchFacilityMapperList"
              :key="item.facilityId"
            >{{ item.facilityName }}</span>
          </p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养品种</p>
          <p>{{ batchData.plantingTypeName }}-{{ batchData.varietyName }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养开始时间</p>
          <p>{{ batchData.assetDate }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>种养结束时间</p>
          <p>{{ batchData.completionDate }}</p>
        </div>
        <div class="information-item">
          <i></i>
          <p>生长周期</p>
          <p v-if="batchData.nowDay">{{ batchData.nowDay }}天</p>
        </div>
      </div>
      <div v-if="!status" class="main-boxone">
        <Main class="Output">
          <template v-slot:top-name> 物联告警明细 </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="alarmDetailsData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column
                  label="批次名称"
                  prop="batchName"
                  min-width="140"
                />
                <el-table-column label="告警名称" prop="baseAlarmName" />
                <el-table-column label="告警数据项" prop="dataItemName" />
                <el-table-column label="告警数据类型" prop="dataTypeName" />
                <el-table-column label="告警类别" prop="alarmTypeName" />
                <el-table-column label="告警发生时间" prop="generateTime" />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
            <div class="bottom">
              <div
                v-for="item in abatchList"
                :key="item.abatchList"
                class="batch-statistics"
              >
                <h4>{{ item.lessee }}</h4>
                <tr>
                  <div>
                    <p>批次名称</p>
                    <p>{{ item.batchName }}</p>
                  </div>
                  <div>
                    <p>异常告警次数</p>
                    <p>{{ item.statisticsReportVO.total }}</p>
                  </div>
                  <div>
                    <p>执行时间</p>
                    <p>{{ item.assetDate }} ~ {{ item.completionDate }}</p>
                  </div>
                </tr>
                <div
                  v-for="(items, indexs) in item.statisticsReportVO
                    .statisticsReportVOList"
                  :key="indexs"
                  class="give"
                >
                  <template v-for="(alarm, index) in items">
                    <div :key="index">
                      <p>
                        {{ alarm.alarmTypeName }}
                      </p>
                      <i></i>
                      <p v-if="alarm.number">
                        <span>{{ alarm.number }}</span> 次
                      </p>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </Main>
        <!-- <Main class="details">
          <template v-slot:top-name> 虫害告警明细 </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="pestdetailsData"
                stripe
                border
                height="80%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column
                  label="虫害名称"
                  prop="insectName"
                  min-width="140"
                />
                <el-table-column label="虫害数量" prop="insectNum" />
                <el-table-column label="发生时间" prop="collectionTime" />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPages"
                :total-size="totalSizes"
                @changePageSize="changePageSizes"
                @changeCurrentPage="changeCurrentPages"
              />
            </div>
            <div v-if="conList.length !== 0" class="agricultural-statistics">
              <el-carousel arrow="never" :autoplay="false">
                <el-carousel-item v-for="(item, index) in conList" :key="index">
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                    >
                      <div class="shadows-top">
                        {{ item1.insectName }}
                      </div>
                      <div class="shadows-main">
                        <h4>虫害总数量</h4>
                      </div>
                      <div class="shadows-bottom">
                        <p>
                          <span>{{ item1.insectNum }}</span> 只
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main> -->
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/kong.vue";
import Pagin from "../components/Pagination/index.vue";
import Search from "../components/search/index.vue";
import Main from "../components/main/index.vue";
import exceptionReport from "@/api/digital-production/statistical-report/exception-report";
import { mymixin } from "@/utils/mixin";
export default {
  components: { BaseMainSlot, Search, Main, Pagin },
  mixins: [mymixin],
  data() {
    return {
      reset: {
        startDate: "",
        endDate: "",
        startTime: this.etPassYearFormatDate(),
        endTime: "",
        lesseeNo: "",
        batchNo: "",
        status: 1
      },
      status: true,
      lesseeList: [],
      batchData: {
        batchName: "",
        batchFacilityMapperList: [],
        plantingTypeName: "",
        varietyName: "",
        assetDate: "",
        completionDate: "",
        nowDay: ""
      },
      batchList: [],
      conList: [],
      abatchList: [],
      abnormalList: [],
      reportForm: {},
      // 农事任务信息
      alarmDetailsData: [],
      pestdetailsData: [],
      // 当前页
      currentPage: 1,
      currentPages: 1,
      // 每页的数据条数
      pageSize: 4,
      // 总条数
      totalSize: 0,
      totalSizes: 0
    };
  },
  created() {
    this.searchData();
    this.batchListData();
    // console.log()
    this.$nextTick(() => {
      let parentId = sessionStorage.parentId;
      if (parentId !== undefined) {
        // 基地权限
        this.status = false;
      } else if (parentId === undefined) {
        // 承租户权限
        this.status = true;
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.search();
    });
  },
  methods: {
    // 搜索组件
    searchList(e) {
      // console.log(e);
      this.reset = e;
      this.batchListData(e);
    },
    // 重置
    resets() {
      let etPassYearFormatDate = this.etPassYearFormatDate();
      // let time = new Date()
      // let endTime = (time).getTime()
      const y = new Date(etPassYearFormatDate).getFullYear()
      const f = y + ' 12-31 23:59:59:999'
      const endTime = new Date(f).getTime()
      // 重置搜索框
      this.reset = {
        startDate: "",
        endDate: "",
        startTime: etPassYearFormatDate,
        endTime: endTime,
        lesseeNo: "",
        batchNo: "",
        status: 1
      };
      // 重置 批次单条批次展示信息
      this.batchData = {
        batchName: "",
        batchFacilityMapperList: [],
        plantingTypeName: "",
        varietyName: "",
        assetDate: "",
        completionDate: "",
        nowDay: ""
      };
      this.$nextTick(() => {
        this.search();
      });
    },
    // 默认开始时间
    etPassYearFormatDate() {
      const y = new Date().getFullYear();
      // 第一天
      const f = y + " 01-01 00:00:00";
      const date = new Date(f).getTime() - 365 * 24 * 60 * 60 * 1000;
      // console.log(date)
      return date;
    },
    // 总体调用接口
    datalist() {
      let batchNoList = []
      if (this.reset.batchNo) {
        batchNoList = [this.reset.batchNo]
      } else if (!this.reset.batchNo && this.reset.lesseeNo) {
        batchNoList = this.batchList.map(el => { return el.batchNo })
      }
      this.batchNoList = batchNoList
      let params = {
        batchNoList,
        startTime: this.reset.startTime || this.reset.startDate,
        endTime: this.reset.endTime || this.reset.endDate,
        lesseeNo: this.reset.lesseeNo,
        batchType: sessionStorage.farmingTypeNo === 'dt' ? "BATCH" : "SINGLE"
      };
      this.params = params
      // console.log(params)
      this.tableDataList(params);
      // this.tableDataLists(params);
      this.reportAllBatch(params);
      this.batchForm(this.reset.batchNo);
    },
    // 物联告警明细
    tableDataList(e) {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          ...e,
          farmingTypeId: sessionStorage.farmingTypeNo,
          system: "SC"
        }
      };
      exceptionReport.alarmMessageList(params).then(res => {
        this.loading = false;
        let data = res.data;
        if (data !== []) {
          // 赋值总条数
          this.totalSize = data.length;
          this.alarmDetailsData = data;
          let havline = this.alarmDetailsData.length % this.pageSize;
          if (this.alarmDetailsData.length < this.pageSize) {
            if (havline < this.pageSize) {
              const remain = this.pageSize - havline;
              for (var i = 0; i < remain; i++) {
                this.alarmDetailsData.push({
                  indflag: i + this.alarmDetailsData.length - 1
                });
              }
            }
          }
        }
      });
    },
    // // 虫害告警明细
    // tableDataLists(e) {
    //   let params = {
    //     page: this.currentPages,
    //     size: this.pageSize,
    //     entity: e
    //   };
    //   exceptionReport.insectCollectionList(params).then(res => {
    //     this.loading = false;
    //     let data = res.data;
    //     // 赋值总条数
    //     if (data) {
    //       this.totalSizes = data.totalElements;
    //       this.pestdetailsData = data.content;
    //       let havline = this.pestdetailsData.length % this.pageSize;
    //       if (this.pestdetailsData.length < this.pageSize) {
    //         if (havline < this.pageSize) {
    //           const remain = this.pageSize - havline;
    //           for (var i = 0; i < remain; i++) {
    //             this.pestdetailsData.push({
    //               indflag: i + this.pestdetailsData.length - 1
    //             });
    //           }
    //         }
    //       }
    //     }
    //   });
    // },
    // 查询单个批次
    async batchForm(val) {
      if (!val) return;
      const { data: Batch } = await exceptionReport.getBatchList(val);
      this.batchData = Batch;
    },
    // 承租户下拉框数据
    async searchData() {
      const { data: lessee } = await exceptionReport.organizationList();
      this.lesseeList = lessee;
    },
    // 批次下拉框数据
    async batchListData(val) {
      if (val) {
        // console.log(val)
        let endTime = this.dateToFormat(val.endTime);
        let startTime = "";
        if (val.startTime !== "") {
          startTime = this.dateToFormat(val.startTime);
        }
        var e = {
          startTime: startTime,
          endTime: endTime
        };
      }
      // 获取批次选择框数据
      const { data: Batch } = await exceptionReport.queryBatchList({
        lesseeNo: this.reset.lesseeNo
      });
      this.batchList = Batch;
    },
    open() {
      this.$confirm(`是否导出${this.$route.meta.title}.xlsx`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.exPort();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 导出
    async exPort() {
      // 点击导出搜索的数据
      this.downLoading = true;
      let batchName = ''
      let organizationName = ''
      let ExcelForm = {}
      let endTime = this.reset.endDate || this.reset.endTime
      let startTime = this.reset.startDate || this.reset.startTime
      const Year = new Date(startTime).getFullYear()
      if (this.reset.batchNo) {
        this.batchList.forEach(item => {
          if (item.batchNo === this.reset.batchNo) {
            batchName = item.batchName
          }
        })
      }
      if (this.reset.lesseeNo) {
        this.lesseeList.forEach(item => {
          if (item.lesseeNo === this.reset.lesseeNo) {
            organizationName = item.organizationName
          }
        })
      }
      ExcelForm = {
        batchNoList: this.batchNoList,
        lesseeNo: this.reset.lesseeNo,
        endTime: endTime,
        startTime: startTime,
        reportTitle: `${Year}年${batchName}${organizationName}`
      }
      const data = await exceptionReport.exportExcel(ExcelForm);
      this.downLoading = false;
      const blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8"
      });
      const link = document.createElement("a");
      // console.log()
      link.download = this.$route.meta.title + ".xlsx";
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    },
    // 转化数据 跑马灯
    async reportAllBatch(e) {
      // console.log(e)
      // 统计次数
      const { data: reportAllBatch } = await exceptionReport.alarmReportList(e);
      this.abnormalList = reportAllBatch;
      // 按批次统计
      // start
      if (e) {
        let endTime = this.dateToFormat(e.endTime);
        let startTime = "";
        if (e.startTime !== "") {
          startTime = this.dateToFormat(e.startTime);
        }
        var params = {
          startTime: startTime,
          endTime: endTime,
          farmingTypeId: sessionStorage.farmingTypeNo,
          batchNoList: e.batchNoList,
          lesseeNo: e.lesseeNo
        };
      }
      const { data: abatchReport } = await exceptionReport.alarmReportInputList(
        params
      );
      abatchReport.forEach(item => {
        item.statisticsReportVO.statisticsReportVOList = this.traverList(
          item.statisticsReportVO.statisticsReportVOList,
          8
        );
        item.statisticsReportVO.statisticsReportVOList.forEach(statistics => {
          let havline = statistics.length % 8;
          if (statistics.length < 8) {
            if (havline < 8) {
              const remain = 8 - havline;
              for (var i = 0; i < remain; i++) {
                statistics.push({
                  indflag:
                     i + statistics.length - 1
                });
              }
            }
          }
        })
      });
      // console.log(abatchReport)
      this.abatchList = abatchReport;
      // end
      // 虫害统计
      const { data: queryReport } = await exceptionReport.queryReportFormList(
        e
      );
      this.conList = this.traverList(queryReport, 5);
      this.reportForm = reportAllBatch[0] || {};
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      const list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      return list;
    },
    dateFormat(row, colnum) {
      if (row.assetDate) {
        // console.log(row)
        return this.$moment(row[colnum.property]).format("YYYY-MM-DD MM:SS:mm");
      }
    },
    search() {
      this.currentPages = 1
      this.currentPage = 1
      this.datalist();
    },
    // 表格分页
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.tableDataList(this.reset);
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.tableDataList(this.reset);
    }
    // changePageSizes(pageSize) {
    //   this.pageSize = pageSize;
    //   this.tableDataLists(this.reset);
    // },
    // changeCurrentPages(currentPage) {
    //   this.currentPages = currentPage;
    //   this.tableDataLists(this.reset);
    // }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/report.scss";
::v-deep .common-layout {
  overflow: auto !important;
  .zhcontent {
    height: calc(100% - 100px) !important;
  }
}
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
// 基地权限
.lesseeOutput {
  // height: 665px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    margin: 0 auto;
    .top {
      padding: 5px;
      width: 100%;
      min-height: 240px;
      height: 240px;
      position: relative;
    }
    .alarm-type {
      margin-top: 20px;
      padding: 5px;
      width: 100%;
    }
    .bottom {
      width: 100%;
      margin-top: 40px;
      .batch-statistics {
        width: 100%;
        background: linear-gradient(90deg, #038e92 0%, #58deb1 100%);
        opacity: 1;
        border-radius: 8px;
        position: relative;
        margin-top: 30px;
        padding: 9px;
        h4 {
          margin: 0 auto;
          position: absolute;
          top: 0;
          left: 50%;
          width: 188px;
          height: 31px;
          line-height: 29px;
          text-align: center;
          box-sizing: border-box;
          transform: translate(-50%, -50%);
          background: rgba(1, 59, 77, 1);
          border: 1px solid #4affda;
          box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 1);
          opacity: 1;
          border-radius: 15px;
        }
        tr {
          padding-top: 35px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: nowrap;
          margin-bottom: 15px;
          div {
            width: 100%;
            flex: 1;
            // border: 1px solid #88FFE7;
            margin-right: 9px;
            border: #28727260 solid 1px;
            outline: #88ffe760 solid 1.5px;
          }
          div:first-child {
            flex: 3;
          }
          div:last-child {
            flex: 3;
            margin-right: 0;
          }
          p {
            text-align: center;
          }
        }
        .give {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: nowrap;
          height: 80px;
          > div {
            height: 100%;
            flex: 1;
            // border: 1px solid #88FFE780;
            // box-shadow:  0 0 1px 1px #038E92;
            border: #28727260 solid 1px;
            outline: #88ffe760 solid 1.5px;
            text-align: center;
            p:first-child {
              height: 20px;
              line-height: 30px;
              margin: 0 auto;
              box-sizing: border-box;
            }
            i {
              display: inline-block;
              width: 100%;
              border-top: 1px solid #28727260;
              box-sizing: border-box;
              border-bottom: 1px solid #88ffe760;
            }
            p:last-child {
              height: 48px;
              line-height: 46px;
              margin: 0 auto;
              box-sizing: border-box;
              span {
                font-size: 20px;
              }
            }
          }
        }
        .give:nth-child(2) {
          margin-top: 9px;
        }
      }
    }
  }
}
.outputdetails {
  // height: 580px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    justify-content: flex-start;
    .top {
      padding: 5px;
      width: 100%;
      height: 320px;
      position: relative;
    }
    .agricultural-statistics {
      height: 280px;
      width: 100%;
      position: relative;
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/exception-report/base-contact-alarm-details.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 78%;
          width: 19%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            top: 7%;
            text-align: center;
            font-size: 14px;
            width: 150px;
            // height: 26px;
            // padding: 0 10px;
            // box-sizing: border-box;
            line-height: 50px;
            // background: rgba(1, 59, 77, 1);
            // border: 1px solid #4affda;
            // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            // opacity: 1;
            // border-radius: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 16px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
              font-size: 20px;
            }
            p {
              padding: 0;
              margin: 20px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              font-size: 18px;
              span {
                font-size: 33px;
              }
            }
          }
          div:nth-child(3) {
            margin-top: 0px;
          }
          .shadows-main {
            margin: 5px 0 0 0;
            padding: 2px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
  }
}
// 承租户权限
::v-deep .main-box {
  flex-direction: column;
}
.Output {
  width: 100%;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    justify-content: flex-start;
    .top {
      padding: 5px;
      position: relative;
      height: 320px;
    }
    .bottom {
      width: 100%;
      margin-top: 40px;
      .batch-statistics {
        width: 100%;
        background: linear-gradient(90deg, #038e92 0%, #58deb1 100%);
        opacity: 1;
        border-radius: 8px;
        position: relative;
        margin-top: 30px;
        padding: 9px;
        h4 {
          margin: 0 auto;
          position: absolute;
          top: 0;
          left: 50%;
          width: 188px;
          height: 31px;
          line-height: 29px;
          text-align: center;
          box-sizing: border-box;
          transform: translate(-50%, -50%);
          background: rgba(1, 59, 77, 1);
          border: 1px solid #4affda;
          box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 1);
          opacity: 1;
          border-radius: 15px;
        }
        tr {
          padding-top: 35px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: nowrap;
          margin-bottom: 15px;
          div {
            width: 100%;
            flex: 1;
            // border: 1px solid #88FFE7;
            margin-right: 9px;
            border: #28727260 solid 1px;
            outline: #88ffe760 solid 1.5px;
          }
          div:first-child {
            flex: 3;
          }
          div:last-child {
            flex: 3;
            margin-right: 0;
          }
          p {
            text-align: center;
          }
        }
        .give {
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: nowrap;
          height: 80px;
          > div {
            height: 100%;
            flex: 1;
            // border: 1px solid #88FFE780;
            // box-shadow:  0 0 1px 1px #038E92;
            border: #28727260 solid 1px;
            outline: #88ffe760 solid 1.5px;
            text-align: center;
            p:first-child {
              height: 20px;
              line-height: 30px;
              margin: 0 auto;
              box-sizing: border-box;
            }
            i {
              display: inline-block;
              width: 100%;
              border-top: 1px solid #28727260;
              box-sizing: border-box;
              border-bottom: 1px solid #88ffe760;
            }
            p:last-child {
              height: 48px;
              line-height: 46px;
              margin: 0 auto;
              box-sizing: border-box;
              span {
                font-size: 20px;
              }
            }
          }
        }
        .give:nth-child(2) {
          margin-top: 9px;
        }
      }
    }
  }
  // height: calc(100% - 30px);
}
.details {
  width: 100%;
  margin-bottom: 0 !important;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
    justify-content: flex-start;
    .top {
      padding: 5px;
      width: 100%;
      height: 320px;
      position: relative;
    }
    .agricultural-statistics {
      height: 280px;
      width: 100%;
      position: relative;
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        .imgdet {
          background: url("~@/assets/statistical-report/exception-report/base-contact-alarm-details.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 78%;
          width: 19%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            text-align: center;
            padding: 16px 0 0 0;
            font-size: 12px;
            width: 100%;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 16px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
              font-size: 20px;
            }
            p {
              padding: 0;
              margin: 20px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              font-size: 18px;
              span {
                font-size: 33px;
              }
            }
          }
          div:nth-child(3) {
            margin-top: 16px;
          }
          .shadows-main {
            margin: 5px 0 0 0;
            padding: 16px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
  }
}

::v-deep #chart {
  > div {
    bottom: 0;
  }
}
.facility {
  width: 210px;
  height: 20px;
  padding: 0 20px;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  span {
    white-space: nowrap;
    // margin-left: 10px;
  }
}
.facility::-webkit-scrollbar {
  height: 4px;
}
</style>
